
<div :class="[$store.state.appPrefix + '-p-lesson-data', 'course-layout-content']" data-table-extra="240">  
  <div class="info-header oh g-table-extra">
    学习数据    
    <el-button type="text" size="small" @click="$flush">刷新</el-button>
    <div class="header-actions fr">
      <el-button class="add-btn" icon="el-icon-notebook-2" type="primary" size="small" @click="$handleRecord">学习记录</el-button>
    </div>
  </div>
  <div class="g-table-layout">
    <el-table v-loading="isPageLoading" :data="courseList">
      <el-table-column
        prop="studyName"
        label="课程名"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span class="text-btn" @click="$goCourseStat(scope.row)">{{scope.row.studyName | filterBlank}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="col in COL_INDEXS"
        :key="col.prop"
        :prop="col.interfaceParam"
        :label="col.label"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span v-if="col.isDict">
            <el-tag size="mini" :type="(col.dictType[scope.row[col.prop]] || {}).tag">{{(col.dictType[scope.row[col.prop]] || {}).codeName | filterBlank}}</el-tag>
          </span>
          <span v-else-if="col.isBar">
            <el-progress v-if="scope.row[col.prop] < 100" :percentage="scope.row[col.prop]" :format="barFormat"></el-progress>
            <el-progress v-else :percentage="scope.row[col.prop]" status="success"></el-progress>
          </span>
          <span v-else>{{(col.unit === '%' ? Number(scope.row[col.prop]) : scope.row[col.prop]) | filterBlank}}{{col.unit && col.unit}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
      <el-table-column
        prop="studyName"
        label="课时名"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span class="text-btn" @click="$goLessonStat(scope.row)">{{scope.row.studyName | filterBlank}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="col in COL_INDEXS_LESSON"
        :key="col.prop"
        :prop="col.interfaceParam"
        :label="col.label"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span v-if="col.isDict">
            <el-tag size="mini" :type="(col.dictType[scope.row[col.prop]] || {}).tag">{{(col.dictType[scope.row[col.prop]] || {}).codeName | filterBlank}}</el-tag>
          </span>
          <span v-else-if="col.isBar">
            <el-progress v-if="scope.row[col.prop] < 100" :percentage="scope.row[col.prop]" :format="barFormat"></el-progress>
            <el-progress v-else :percentage="scope.row[col.prop]" status="success"></el-progress>
          </span>
          <span v-else>{{(col.unit === '%' ? Number(scope.row[col.prop]) : scope.row[col.prop]) | filterBlank}}{{col.unit && col.unit}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
</div>
